<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>班级圈</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

	<script>
		var ua = navigator.userAgent.toLowerCase();
		if (self != top && ['iphone', 'ipad', 'ipod'].some(function (key) {
			return ua.indexOf(key) !== -1;
		})) top.location.replace(location.href);
	</script>

	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/classes_circle_item.css">
	<link href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
	<style>
		label {
			margin-left: 20px;
		}

		.img {
			padding-left: 20px;
		}

		.img img {
			max-height: 150px;
		}

		.img-wrap {
			display: inline-block;
			position: relative;
		}

		.remove {
			position: absolute;
			top: 5px;
			right: 5px;
		}

		#banComment {
			margin-left: calc(5% + 2px);
		}

		video {
			max-width: 100%;
			max-height: 120px;
		}
	</style>

</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
				<input type="file" ref="file" id="file" name="file" accept="image/*" @change="upload">
			</form>

			<div class="header">
				<div class="header_title">发布班级圈</div>
				<a onclick="history.back()">
					<img src="image/return.png" alt="" class="return">
				</a>
				<div class="header_title_right" @click="submit">发布</div>
			</div>

			<div v-if="isTeacher" class="ui-select header-after">
				<select v-model="circle.classesId">
					<option :value="undefined" disabled="disabled">请选择班级</option>
					<option v-for="classes in classess" v-text="classes.name" :key="classes.id" :value="classes.id">
					</option>
				</select>
			</div>

			<div class="content">
				<div class="info">
					<textarea placeholder="这一刻我想说..." class="text" v-model="circle.text"></textarea>
					<div class="File">
						<label @click="choose" v-if="circle.classesId&&picCount>0">
							<img src="image/upload.png" style="height: 35px; margin-bottom: 3px;">
						</label>
						<label v-if="isTeacher&&postVideo" @click="chooseVideo">
							<img src="/wechat/image/add_video.svg" style="height: 35px;margin-bottom: 3px;">
						</label>
					</div>
					<div class="img">
						<div v-for="(pic,index) in pics" :key="index" class="img-wrap">
							<img :src="getImg(pic)" alt="">
							<img src="image/remove.svg" class="remove" @click="del(index)" alt="">
						</div>
					</div>

					<div style="margin: 5px 10%;" v-if="circle.video">
						<video :src="getImg(circle.video)" controls playsinline webkit-playsinline
							x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
					</div>
				</div>
				<div style="margin-left: 5%;">
					<template v-if="isTeacher">
						<input type="checkbox" id="banComment" v-model="circle.banComment">
						<label for="banComment" style="font-size: 15px">禁止评论</label>
					</template>
				</div>
			</div>

		</div>
	</div>

	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/nprogress/0.2.0/nprogress.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/wechat/js/wx.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				classess: [],
				circle: {
					banComment: true,
					video: null
				},
				isTeacher: isTeacher(),
				prefix: null,
				pics: [],
				schoolId: getPerson().schoolId,
				serverId: null,
				img: null,
				media: 'img',
				postVideo: false,
				picUsed: 0
			},
			created: function () {
				if (this.isTeacher) {
					axios.get('/t/classes').then(function (res) {
						this.classess = res.data;
					}.bind(this));

					axios.get('/t/circle/video').then(function (res) {
						if (res.data) this.postVideo = true;
					}.bind(this));
				}

				this.prefix = this.isTeacher ? '/t' : '/s';
			},
			methods: {
				upload: function () {
					var file = this.$refs.file.files[0];
					if (!file) return;
					if (file.size > 7E7) {
						alert('文件大于70M');
						return;
					}
					NProgress.start();
					axios.post(this.prefix + '/upload/circle?schoolId=' + this.schoolId,
						new FormData(this.$refs.form), {
						onUploadProgress: function (progressEvent) {
							NProgress.set(progressEvent.loaded / progressEvent.total);
						}
					}).then(function (res) {
						if (this.media == 'img') this.pics.push(res.data.data);
						else this.circle.video = res.data.data;
						NProgress.done();
					}.bind(this));
				},
				getImg: function (pic) {
					return '/static/' + this.schoolId + '/circle/' + pic;
				},
				submit: function () {
					if (this.isTeacher && !this.circle.classesId)
						return alert('请选择班级');

					if (!confirm('确认发布？')) return;
					this.circle.pics = this.pics.join('|');

					var msg = '发布成功。';
					if (!this.isTeacher) msg += '通过审核即会显示。';
					axios.post(this.prefix + '/circle', this.circle).then(function (res) {
						alert(msg);
						history.back();
					});
				},
				del: function (index) {
					if (confirm('确定移除该图片？'))
						this.pics.splice(index, 1);
				},
				choose: function () {
					if (wxReady) {
						wxChooseImg(this.picCount, 'circle', function (pic) {
							this.pics.push(pic);
						}.bind(this));
					} else {
						this.media = 'img';
						this.fileClick('image/*');
					}
				},
				chooseVideo: function () {
					alert('提示：为了减少视频在网络传输中产生的延时，请选择文件大小较小的视频。视频文件大小不宜超过70MB。');
					this.media = 'video';
					this.fileClick('video/mp4');
				},
				fileClick: function (accept) {
					var file = this.$refs.file;
					file.accept = accept;
					file.click();
				}
			},
			computed: {
				picCount: function () {
					return 9 - this.picUsed - this.pics.length;
				}
			},
			watch: {
				"circle.classesId": function (to) {
					if (!to || !this.isTeacher) return;
					axios.get('/t/circle/pic/' + to).then(function (res) {
						this.picUsed = res.data;
					}.bind(this));
				}
			}
		});
	</script>

</body>

</html>